<template>
<div>

  <a-modal
    title="密码找回"
    :keyboard="false"
    :maskClosable="false"
    :closable="false"
    :visible="visible"
    @cancel="cancelUpdatePassword"
    @ok="handleUpdatePassword">
    <a-menu v-model="current" mode="horizontal" class="type_title">
      <a-menu-item key="1"> 邮箱找回 </a-menu-item>
      <a-menu-item key="2" > 短信找回 </a-menu-item>
    </a-menu>

    <a-form :form="form" v-if="current[0] == 1">
      <a-form-item
        label='邮箱号'
        v-bind="formItemLayout">
        <a-input v-decorator="['email',
                {
                    rules: [{ required: true, message: '请输入邮箱号' }],
                }]" placeholder="请输入邮箱号"></a-input>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label='图片验证码'>
        <a-input v-decorator="['tpyzm',
                {
                    rules: [{ required: true, message: '请输入图片验证码' }],
                }]" style="width: 55%;margin-right: 20px"/>
        <img style="width: 80px" :src="'data:image/jpeg;base64,' +captcha.img" alt="">
      </a-form-item>
      <a-form-item
        label='验证码: '
        v-bind="formItemLayout2"
      >
        <a-row :gutter="8">
          <a-col :span="12">
            <a-input size="large" v-decorator="['yzm',
                  {
                      rules: [{ required: true, message: '请输入验证码'}],
                  }]" type="text" placeholder="验证码">
              </a-input>

          </a-col>
          <a-col :span="12">
            <a-button
              class="getCaptcha"
              size="large"
              :disabled="state.EmailsmsSendBtn"
              @click.stop.prevent="getEmailCaptcha"
              v-text="!state.EmailsmsSendBtn && '获取验证码'||(state.Emailtime+' s')"></a-button>
          </a-col>
        </a-row>
       </a-form-item>
        <a-form-item
          label='新密码'
          v-bind="formItemLayout">
          <a-input type="password" v-decorator="['newPasswd',
                {
                    rules: [{ required: true, message: '请输入新密码' }],
                }]" placeholder="请输入新密码"></a-input>
        </a-form-item>
    </a-form>

    <a-form :form="form" v-if="current[0]  == 2">
      <a-form-item
        label='手机号'
        v-bind="formItemLayout">
        <a-input v-decorator="['mobile',
                {
                    rules: [{ required: true, message: '请输入正确的手机号', pattern: /^1[3456789]\d{9}$/ }],
                }]" placeholder="11 位手机号">
        </a-input>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label='图片验证码'>
        <a-input v-decorator="['tpyzm',
                {
                    rules: [{ required: true, message: '请输入图片验证码' }],
                }]" style="width: 55%;margin-right: 20px"/>
        <img style="width: 80px" :src="'data:image/jpeg;base64,' +captcha.img" alt="">
      </a-form-item>
      <a-form-item
        label='验证码: '
        v-bind="formItemLayout2"
      >
        <a-row :gutter="8">
          <a-col :span="12">
            <a-input size="large" v-decorator="['yzm',
                  {
                      rules: [{ required: true, message: '请输入验证码'}],
                  }]" type="text" placeholder="验证码">
              </a-input>

          </a-col>
          <a-col :span="12">
            <a-button
              class="getCaptcha"
              size="large"
              :disabled="state.smsSendBtn"
              @click.stop.prevent="getCaptcha"
              v-text="!state.smsSendBtn && '获取验证码'||(state.time+' s')"></a-button>
          </a-col>
        </a-row>
    </a-form-item>
        <a-form-item
          label='新密码'
          v-bind="formItemLayout">
          <a-input type="password" v-decorator="['newPasswd',
                {
                    rules: [{ required: true, message: '请输入新密码' }],
                }]" placeholder="请输入新密码"></a-input>
        </a-form-item>
    </a-form>
  </a-modal>
</div>
</template>
<script>
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 18 }
}
const formItemLayout2 = {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 },
        }
      }
const levelNames = {
  0: '低',
  1: '低',
  2: '中',
  3: '强'
}
const levelClass = {
  0: 'error',
  1: 'error',
  2: 'warning',
  3: 'success'
}
const levelColor = {
  0: '#ff0000',
  1: '#ff0000',
  2: '#ff7e05',
  3: '#52c41a'
}

export default {
  props: {
    visible: {
      default: false
    },
    userType: {
      defaulf: 'SYSTEM'
    }
  },
  created() {
    this.getPicCaptcha();
  },
  data() {
    return {
      current: ['1'],
      form: this.$form.createForm(this),
      formItemLayout,
      formItemLayout2,
      captcha: {},
      state: {
        time: 60,
        smsSendBtn: false,
        passwordLevel: 0,
        passwordLevelChecked: false,
        percent: 10,
        progressColor: '#FF0000',
        Emailtime: 60,
        EmailsmsSendBtn: false,
      },
      oldPassword: '',
      newPassword: '',
      validateStatus: '',
      help: '',
    }
  },
  methods: {
    getPicCaptcha() {
      this.$api.auth.getCaptcha().then(res => {
        this.captcha = {...res.data}
        this.$nextTick(() => {
          this.form.setFieldsValue({
            uuid: res.data.uuid
          });
        })
      })
    },
    getCaptcha(e) {
      e.preventDefault()
      let that = this
      this.form.validateFields(['mobile', 'tpyzm'], {force: true},
        (err, values) => {
          if (!err) {
            this.state.smsSendBtn = true
            let interval = window.setInterval(() => {
              if (that.state.time-- <= 0) {
                that.state.time = 300
                that.state.smsSendBtn = false
                window.clearInterval(interval)
              }
            }, 1000);
            values.uuid = this.captcha.uuid,
              values.userType = this.userType
            values.sjh = values.mobile
            this.$post('/common/sendSms', values).then(res => {
              this.$message.success(res.msg)
            }).catch(res => {
              if (res.status == 0) {
                this.getPicCaptcha()
              }
            })
          }
        }
      )
    },
    getEmailCaptcha(e){
      e.preventDefault()
      let that = this
      this.form.validateFields(['email', 'tpyzm'], {force: true},
        (err, values) => {
          if (!err) {
            console.log("values", values)
            this.state.EmailsmsSendBtn = true
            let intervalEmail = window.setInterval(() => {
              if (that.state.Emailtime-- <= 0) {
                that.state.Emailtime = 300
                that.state.EmailsmsSendBtn = false
                window.clearInterval(intervalEmail)
              }
            }, 1000);
            console.log(this.userType)
            values.uuid = this.captcha.uuid,
              values.userType = this.userType

            this.$post('/common/sendEmailCode', values).then(res => {
              this.$message.success(res.msg)
            }).catch(res => {
              if (res.status == 0) {
                this.getPicCaptcha()
              }
            })
          }
        }
      )
    },
    cancelUpdatePassword () {
      this.form.resetFields()
      this.$emit('close')
    },
    handleUpdatePassword () {
      this.form.validateFields((err, values) => {
        if (!err) {
          if(this.current[0] == 1){
            values.userType = this.userType
            this.$post('/common/retrievePasswdEmail', values).then(res => {
              this.$message.success(res.msg)
              this.$emit('close')
              this.form.resetFields()
            })
          }else{
            values.userType = this.userType
            values.sjh = values.mobile
            this.$post('/common/retrievePasswdSms', values).then(res => {
              this.$message.success(res.msg)
              this.$emit('close')
              this.form.resetFields()
            })
          }
        }
      })
    },
  }
}
</script>
<style lang="less" scoped>
  .update-password {
    &.error {
      color: #ff0000;
    }
    &.warning {
      color: #ff7e05;
    }
    &.success {
      color: #52c41a;
    }
  }
  .ant-modal-body{
    padding-top: 0 !important;
  }
  .type_title{
    margin-bottom: 30px !important;
  }
</style>
